<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"flat"},"back2top":{"enable":true,"sidebar":true,"scrollpercent":true},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="JQuery介绍  JavaScript框架库：就是一 个普通的js文件，封装了很多的函数，封装了很多兼容的代码 &#x2F;&#x2F;jQuery是JavaScript框架库中的一一种&#x2F;&#x2F;jQuery的好处：写的少，做的多，链式编程，隐式迭代….&#x2F;&#x2F;可以解决js兼容的问题，T 框架库和jQuery介绍 JavaScript框架库：就是一个普通的js文件，封装了很多的函数，封装了很多兼容的代码 常见的JavaScr">
<meta property="og:type" content="article">
<meta property="og:title" content="前端&#x2F;JavaScript&#x2F;JQuery&#x2F;JQuery">
<meta property="og:url" content="http://yoursite.com/2020/02/16/%E5%89%8D%E7%AB%AF/JavaScript/JQuery/JQuery/index.html">
<meta property="og:site_name" content="heweiliang blog">
<meta property="og:description" content="JQuery介绍  JavaScript框架库：就是一 个普通的js文件，封装了很多的函数，封装了很多兼容的代码 &#x2F;&#x2F;jQuery是JavaScript框架库中的一一种&#x2F;&#x2F;jQuery的好处：写的少，做的多，链式编程，隐式迭代….&#x2F;&#x2F;可以解决js兼容的问题，T 框架库和jQuery介绍 JavaScript框架库：就是一个普通的js文件，封装了很多的函数，封装了很多兼容的代码 常见的JavaScr">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-02-16T09:08:03.988Z">
<meta property="article:modified_time" content="2020-06-26T07:26:18.524Z">
<meta property="article:author" content="heweiliang">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://yoursite.com/2020/02/16/%E5%89%8D%E7%AB%AF/JavaScript/JQuery/JQuery/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>前端/JavaScript/JQuery/JQuery | heweiliang blog</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="heweiliang blog" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">heweiliang blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-fw fa-user"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
        <li class="menu-item menu-item-schedule">

    <a href="/schedule/" rel="section"><i class="fa fa-fw fa-calendar"></i>日程表</a>

  </li>
        <li class="menu-item menu-item-sitemap">

    <a href="/sitemap.xml" rel="section"><i class="fa fa-fw fa-sitemap"></i>站点地图</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

  <a href="https://github.com/yourname" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/02/16/%E5%89%8D%E7%AB%AF/JavaScript/JQuery/JQuery/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          前端/JavaScript/JQuery/JQuery<a href="https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name_posts/%E5%89%8D%E7%AB%AF/JavaScript/JQuery/JQuery.md" class="post-edit-link" title="编辑" rel="noopener" target="_blank"><i class="fa fa-pencil"></i></a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-02-16 17:08:03" itemprop="dateCreated datePublished" datetime="2020-02-16T17:08:03+08:00">2020-02-16</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-26 15:26:18" itemprop="dateModified" datetime="2020-06-26T15:26:18+08:00">2020-06-26</time>
              </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span><br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>18k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>17 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h3 id="JQuery"><a href="#JQuery" class="headerlink" title="JQuery"></a>JQuery</h3><h6 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h6><p>  JavaScript框架库：就是一 个普通的js文件，封装了很多的函数，封装了很多兼容的代码</p>
<p>//jQuery是JavaScript框架库中的一一种<br>//jQuery的好处：写的少，做的多，链式编程，隐式迭代….<br>//可以解决js兼容的问题，T</p>
<p>框架库和jQuery介绍</p>
<p>JavaScript框架库：就是一个普通的js文件，封装了很多的函数，封装了很多兼容的代码</p>
<p>常见的JavaScript框架库<br>Prototype、YUI（网络反响一般）、Dojo、ExtJS、jQuery等，这些库对JavaScript进行了封装，简化了开发。这些库是对lavaScript的封装，内部都是用JavaScript实现的。</p>
<p>jQuery：.<br>jQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用jQuery的代码、编写jQuery的扩展插件等仍然需要JavaScript的技术，jQuery本身就是一堆javaScript函数。 </p>
<p>为什么要学习JQuery<br>DOM中一个简单的功能需要大量的代码<br>DOM中兼容的问题很多<br>DOM中代码的容错性很差<br>DOM中window.onload也只能有一个</p>
<p>jQuery的特点？Write Less，Do More</p>
<p>很好的解决了不同浏览器的兼容问题（IE 6.0+，FF 2+，Safari 3.0+，Opera 9.0+，Chrome）css还是有问题的对于不同控件具有统–的操作方式。<br>体积小（儿十KB）、使用简单方便（Write Less Do More）<br>链式编程$（”#div1”）.draggble（）.show（）.hide（）.fly（）、隐式迭代<br>插件丰富、开源、免费。插件多缺什么找什么<br>让编写JavaScript程序更简单、更强大！</p>
<p>文件使用</p>
<p>顶级对象</p>
<p>DOM中的顶级对象：docuemnt—页面中的顶级对象</p>
<p>docuemnt，点出来的是DOM中的属性和方法</p>
<p>BOM中的顶级对象：window—浏览器中的项级对象</p>
<p>window点出来的是浏览器中的属性和方法</p>
<p>window.document </p>
<p>jQuery的项级对象：jQuery—$<br>$点出来的是jQuery中的方法 </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">Javascript</span><br><span class="line">window.onload &#x3D; function () &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">jQuery的代码---和DOM中的window.onload事件相同的</span><br><span class="line">&#x2F;&#x2F;页面中所有的内容加载完毕后才触发，标签，图片文字内容....</span><br><span class="line">$(window).load(function()&#123;</span><br><span class="line">	console.log(&quot;123&quot;);</span><br><span class="line">&#125;);</span><br><span class="line">$(window).load(function()&#123;</span><br><span class="line">	console.log(&quot;456 &quot;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;第二种页面加载的事件的写法---都是方法了</span><br><span class="line">&#x2F;&#x2F;页面中的基本的标签加载完毕后就可以触发了</span><br><span class="line">$(document).ready(function()&#123;</span><br><span class="line">	console.log(&quot;456 &quot;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">jQuery(function()&#123;</span><br><span class="line">	</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">$(function()&#123;</span><br><span class="line">	</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<p>普通版 开发 阅读</p>
<p>压缩版 min.js 上线</p>
<p>为什么Jquery对象和DOM对象要<br>互转<br>DOM对象转jQ uery对象操作方便，毕竟Jguery中方法都是封装好了的，而且兼容问题解决的很好，代码少，方便.<br>Jquery对象转DOM对象，因为Iquery中文件–直在更新，很多东西都是随着使用而进行封装和升级，不太可能把所有dom中用到的进行封装，还有很多未知的兼容问题没有封装进去，所以，有的时候iguery中不能解决的问题，还需要原生的js代码来解决，所以，iquery对象有的时候需要转成dom对象来进行操作</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">DOM对象和Query对象可以互转</span><br><span class="line">DOM对象转---&gt;jQuery对象：</span><br><span class="line">$（DOM的对象）----&gt;jQuery对象</span><br><span class="line"></span><br><span class="line">  window.onload &#x3D; function () &#123;</span><br><span class="line">            var btnObj &#x3D; document.getElementById(&#39;btn&#39;);</span><br><span class="line">            $(btnObj).click(function () &#123;</span><br><span class="line">                $(this).css(&quot;backgroundColor&quot;, &quot;red&quot;);</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">jquert对----&gt;）DOM对象：</span><br><span class="line">$（&quot;#btn&quot;）[0]---&gt;DOM对象</span><br><span class="line">2.</span><br><span class="line">$（&quot;#btn&quot;）.get（0）---DOM对象</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> var btnObj &#x3D; document.getElementById(&#39;btn&#39;); DOM对象</span><br><span class="line"> var obj &#x3D; $(btnObj).get(0) &#x2F;&#x2F;DOM对象</span><br><span class="line">  var obj &#x3D; $(btnObj)[0] &#x2F;&#x2F;DOM对象</span><br><span class="line">   $(function()&#123;</span><br><span class="line">            $(&quot;#btn&quot;).click(function()&#123;</span><br><span class="line">                $(this).css(&quot;backgroundColor&quot;,&quot;yellow&quot;);</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;);</span><br><span class="line">        $(function()&#123;</span><br><span class="line">            $(&quot;#btn&quot;)[0].onclick(function()&#123;</span><br><span class="line">                $(this).css(&quot;backgroundColor&quot;,&quot;yellow&quot;);</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;);</span><br></pre></td></tr></table></figure>



<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"> &#x2F;&#x2F; window.onload &#x3D; function () &#123;</span><br><span class="line">           var btn &#x3D; document.getElementById(&#39;btn&#39;);</span><br><span class="line">       &#x2F;&#x2F;     btn.onclick &#x3D; function () &#123;</span><br><span class="line">       &#x2F;&#x2F;         this.style.backgroundColor &#x3D; &quot;red&quot;;</span><br><span class="line">       &#x2F;&#x2F;     &#125;</span><br><span class="line">       &#x2F;&#x2F; &#125;</span><br><span class="line"></span><br><span class="line">$(function()&#123;</span><br><span class="line">           $(&#39;#btn&#39;).click(function()&#123;</span><br><span class="line">               $(this).css(&quot;backgroundColor&quot;,&quot;red&quot;);</span><br><span class="line">           &#125;);</span><br><span class="line">       &#125;);</span><br></pre></td></tr></table></figure>





<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">        &#x2F;&#x2F; Js</span><br><span class="line">        window.onload &#x3D; function () &#123;</span><br><span class="line">            var btn &#x3D; document.getElementById(&#39;btn&#39;)</span><br><span class="line">            btn.onclick &#x3D; function () &#123;</span><br><span class="line">                if (btn.value &#x3D;&#x3D; &quot;关灯&quot;) &#123;</span><br><span class="line">                    document.body.style.backgroundColor &#x3D; &quot;black&quot;</span><br><span class="line">                    btn.value &#x3D; &quot;开灯&quot;</span><br><span class="line">                &#125; else &#123;</span><br><span class="line">                    document.body.style.backgroundColor &#x3D; &quot;white&quot;</span><br><span class="line">                    btn.value &#x3D; &quot;关灯&quot;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">    </span><br><span class="line">    &lt;script src&#x3D;&quot;https:&#x2F;&#x2F;cdn.staticfile.org&#x2F;jquery&#x2F;1.10.2&#x2F;jquery.min.js&quot;&gt;</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        $(function () &#123;</span><br><span class="line">            $(&quot;#btn&quot;).click(function () &#123;</span><br><span class="line">                if ($(this).val() &#x3D;&#x3D; &quot;关灯&quot;) &#123;</span><br><span class="line">                    $(&quot;body&quot;).css(&quot;backgroundColor&quot;, &quot;black&quot;)</span><br><span class="line">                    $(this).val(&quot;开灯&quot;)</span><br><span class="line">                &#125; else &#123;</span><br><span class="line">                    $(&quot;body&quot;).css(&quot;backgroundColor&quot;, &quot;white&quot;)</span><br><span class="line">                    $(this).val(&quot;关灯&quot;)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;);</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>document.body.style.backgroundColor = “white”</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.val()方法---&gt;获取按钮的value属性的值</span><br><span class="line">.val(&quot;内容&quot;); 是设置按钮的value属性的值</span><br><span class="line">$(this)</span><br></pre></td></tr></table></figure>

<p>事件加载</p>
<h6 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h6><p>DOM中获取元素的方式</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">document.getElementById(&quot;id的值&quot;);根据id获取元素</span><br><span class="line">document.getElementByTagName(“标签的名字”);根据标签的名字获取元素，多个</span><br><span class="line">document.getElementsByName(“name属性的值&quot;);根据name属性的值获取元素</span><br><span class="line">document.getElementsByClassName(&quot;类样式的名字&quot;)，根据的是类样式的名字来获取元素，</span><br></pre></td></tr></table></figure>

<p>jQuery常用选择器</p>
<p>id选择器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#id的值&quot;)</span><br></pre></td></tr></table></figure>

<p>标签选择器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;标签的名字&quot;)</span><br></pre></td></tr></table></figure>

<p>类选择器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;.类样式的名字&quot;)</span><br></pre></td></tr></table></figure>



<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;*&quot;)&#123;</span><br><span class="line">	&#x2F;&#x2F;所有的元素</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">text()方法相当于DOM中的innerText或者是textContent</span><br></pre></td></tr></table></figure>

<p>标签+类选择器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(li.cls)</span><br></pre></td></tr></table></figure>

<p>多条件选择器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(span,li,div)</span><br></pre></td></tr></table></figure>



<p>层次选择器：后代选择器（子元素中元素子，仔仔，孙）.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#dv li&quot;) 或者$(&quot;ul li &quot;)</span><br></pre></td></tr></table></figure>

<p>子代选择器（直接的所有子元素，儿子）.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#ul&gt;li&quot;) 或者$(&quot;div&gt;span&quot;) 或者$(&quot;.cls&gt;li&quot;)</span><br></pre></td></tr></table></figure>



<p>常用方法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">.text() 获取这个元素中的文字内容</span><br><span class="line">.text(&quot;内容&quot;) 设置值 </span><br><span class="line">&#x2F;&#x2F;相当于DOM中的innerText</span><br><span class="line">.html（）方法，设置标签中间显示其他标签及内容，类似于innerHTML</span><br><span class="line">.text（）方法，设置标签中间显示的文本内容，类似于innerText</span><br><span class="line">.val（）方法.设置input标签中value的值，类似于value</span><br><span class="line">.css（）方法，.设置元素的样式，类似于style</span><br><span class="line">.css()方法，里面可以直接写键值对的方式</span><br><span class="line">$(&quot;#dv&quot;).css(&#123;&quot;width&quot;:&quot;300px&quot;,&quot;height&quot;:&quot;200px&quot;,&#125;)</span><br></pre></td></tr></table></figure>



<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;div *&quot;) 所有元素</span><br></pre></td></tr></table></figure>



<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.childrem(&quot;ul&quot;)</span><br><span class="line">.show()</span><br><span class="line"></span><br><span class="line">:even()  奇数</span><br><span class="line">:odd()偶数</span><br></pre></td></tr></table></figure>





<p>索引选择器 索引值从1开始算</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">eq(3)  获取索引的元素</span><br><span class="line">gt(3)	索引大于3的所有元素</span><br><span class="line">lt(3)	索引小于3的所有元素</span><br><span class="line">silblings(&quot;&quot;)</span><br><span class="line">eq(&quot;&quot;)</span><br><span class="line">.siblings</span><br><span class="line">siblings() 方法返回被选元素的所有同级元素。</span><br><span class="line">同级元素是共享相同父元素的元素。</span><br><span class="line">index() 获取索引值</span><br><span class="line">$(&quot;#center&gt;li:eq(&quot; + index + &quot;)&quot;).siblings(&quot;li&quot;).hide();</span><br><span class="line">$(&quot;#center&gt;li:eq(&quot; + index + &quot;)&quot;).show();</span><br><span class="line">索引值为数字</span><br><span class="line">eq(&quot;+index+&quot;)</span><br><span class="line">.find（）方法，针对当前的元素找里面的--些其他的元素</span><br></pre></td></tr></table></figure>



<h6 id="样式操作"><a href="#样式操作" class="headerlink" title="样式操作"></a>样式操作</h6><p>设置元素样式</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">.css（&quot;属性&quot;，&quot;属性值&quot;）；</span><br><span class="line">.css（&quot;属性&quot;，&quot;属性值&quot;）.css（&quot;属性&quot;，&quot;属性值&quot;）；</span><br><span class="line">.css（&#123;&quot;属性&quot;：&quot;属性值&quot;，&quot;属性&quot;：&quot;属性值&quot;&#125;）；</span><br><span class="line">&#x2F;&#x2F; &#123; &#125;</span><br><span class="line"></span><br><span class="line">第一种写法</span><br><span class="line">$(&quot;ul li&quot;).css(&quot;background&quot;,&quot;red&quot;);</span><br><span class="line"></span><br><span class="line">第二种写法</span><br><span class="line">var style &#x3D; &#123;</span><br><span class="line">&quot;backgroudColor&quot; : &quot;red&quot;,</span><br><span class="line">&quot;fontSize&quot;:&quot;30px&quot;</span><br><span class="line">&#125;</span><br><span class="line">$(&quot;ul&gt;li&quot;).css(style);</span><br><span class="line"></span><br><span class="line">第三种写法</span><br><span class="line">$(&quot;ul&gt;li&quot;).css(&quot;backgroundColor&quot;,&quot;red&quot;).css(&quot;fontSize&quot;,&quot;30px&quot;);</span><br><span class="line"> </span><br><span class="line">获取属性的值,写一个参数即可</span><br><span class="line">console.log($(&quot;#ul&gt;li&quot;).css(&quot;backgroundColor&quot;));</span><br></pre></td></tr></table></figure>

<p>添加和移除类设置元素样式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">hasClass("cls")</span><br><span class="line">检测元素是否应用某个类样式</span><br><span class="line"></span><br><span class="line">toggleClass("cls") </span><br><span class="line">切换类样式</span><br><span class="line"></span><br><span class="line">addClass();</span><br><span class="line">参数：类样式名字，添加样式的同时不会消除原有的样式</span><br><span class="line">addClass("cls").addClass("cls2");</span><br><span class="line">addClass("cls cls2");</span><br><span class="line"></span><br><span class="line">removeClass();</span><br><span class="line">不写参数移除所有的类样式</span><br><span class="line"></span><br><span class="line">removeClass("cls")</span><br><span class="line">移除指定的一一个类样式，类样式名字不用点</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">val() 可以获取input值</span><br><span class="line">val(&quot;属性&quot;) 设置val的值</span><br><span class="line"></span><br><span class="line">var index &#x3D; $(this).index();</span><br><span class="line">$(ul&gt;li:eq(&quot;+index+&quot;))</span><br><span class="line"></span><br><span class="line">$(ul&gt;li:eq(&quot;index&quot;)) &#x2F;&#x2F;index 字符串</span><br></pre></td></tr></table></figure>



<h6 id="链-式编程"><a href="#链-式编程" class="headerlink" title="链 式编程"></a>链 式编程</h6><p>对象.方法().方法().方法(); </p>
<p>断链：对象调用方法，返回的不是当前的对象，再调用方法，调用不了</p>
<p><strong>多行代码合并成一行代码，前提要认清此行代码返回的是不是对象.是对象才能进行链式编程</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">.html(&quot;val&quot;).text(&quot;val&quot;).css()链式编程，隐式迭代。</span><br><span class="line"></span><br><span class="line">链式编程注意：$（&quot;div&quot;）.html（&#39;设置值’）.val（‘设置值’）；这样可以，但是（&#39;div）.html().text（）这样是不对的，因为获取值时返回的是获取的字符串而不是对象本身所以不能链式编程。</span><br><span class="line"></span><br><span class="line">html(&quot;&lt;h1&gt;这是一个h1&lt;h1&gt;&quot;)</span><br><span class="line"></span><br><span class="line">$(function()&#123;</span><br><span class="line">	$(&quot;li&quot;).click(function()&#123;&#125;).moverover().moverenter();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>获取兄弟元素的几个方法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">next()</span><br><span class="line">当前元素之后的紧邻着的第一个兄弟元素（下一个）</span><br><span class="line"></span><br><span class="line">nextAll()</span><br><span class="line">当前元素之后的所有兄弟元素</span><br><span class="line"></span><br><span class="line">prev()</span><br><span class="line">当前元素之前的紧邻着的兄弟元素（上一个）</span><br><span class="line"></span><br><span class="line">prevAll()</span><br><span class="line">当前元素之前的所有兄弟元素</span><br><span class="line"></span><br><span class="line">siblings()</span><br><span class="line">当前元素的所有兄弟元素</span><br><span class="line"></span><br><span class="line">last()</span><br><span class="line">最后一个元素</span><br><span class="line"></span><br><span class="line">first()</span><br></pre></td></tr></table></figure>

<p>解决断链：恢复到断链之前的一个效果—修复断链 <code>end()</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(this).prevAll().css(&quot;backgroundColor&quot;,&quot;red&quot;).end().nextAll().css(&quot;backgroundColor&quot;,&quot;blue&quot;);</span><br></pre></td></tr></table></figure>



<h6 id="动画"><a href="#动画" class="headerlink" title="动画"></a>动画</h6><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">hide()方法</span><br><span class="line">参数：可以是一个number类型（数字），也可以是字符串类型</span><br><span class="line">number</span><br><span class="line">1000ms 毫秒</span><br><span class="line">字符串</span><br><span class="line">&quot;slow&quot; &quot;normal&quot; &quot;fast&quot;</span><br><span class="line">show()方法</span><br><span class="line"></span><br><span class="line">hide(800,function()&#123;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">argumnets.callee 相当于递归</span><br><span class="line">$(&quot;#btn1&quot;).click</span><br><span class="line">$(&quot;div&gt;img&quot;).last(&quot;img&quot;).hide(800,function()&#123;</span><br><span class="line">	$(this).prev().hide(800,arguments.callee);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">$(function () &#123;</span><br><span class="line">           $(&quot;#show&quot;).click(function () &#123;</span><br><span class="line">               $(&quot;ul &gt; li&quot;).last(&quot;li&quot;).hide(200, function () &#123;</span><br><span class="line">                   $(this).prev().hide(200, arguments.callee);</span><br><span class="line">               &#125;);</span><br><span class="line">           &#125;);</span><br><span class="line">           $(&quot;#hide&quot;).click(function () &#123;</span><br><span class="line">               $(&quot;ul &gt; li&quot;).first(&quot;li&quot;).show(200, function () &#123;</span><br><span class="line">                   $(this).next().show(200, arguments.callee);</span><br><span class="line">               &#125;);</span><br><span class="line">           &#125;);</span><br><span class="line">       &#125;);</span><br></pre></td></tr></table></figure>

<p>其他动画效果</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">slideUp();</span><br><span class="line">slideUp(1000);</span><br><span class="line">滑入</span><br><span class="line">slideDown();</span><br><span class="line">滑出</span><br><span class="line">slideToggle();</span><br><span class="line">切换滑入滑出</span><br><span class="line">fadeIn()</span><br><span class="line">淡入</span><br><span class="line">fadeOut()</span><br><span class="line">淡出</span><br><span class="line">fadeToggle()</span><br><span class="line">切换淡入淡出</span><br><span class="line"></span><br><span class="line">可以设置透明度</span><br><span class="line">参数1 ： 时间 slow normal fast</span><br><span class="line">参数2 ：透明度 .css(&quot;opacity&quot;,0.1);</span><br></pre></td></tr></table></figure>





<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">animate方法</span><br><span class="line">第一个参数：键值对，（数值的属性可以改颜色不能改）</span><br><span class="line">第二个参数：动画的时间</span><br><span class="line">第三个参数：回调函数</span><br><span class="line">jquery animate()背景色渐变的处理</span><br><span class="line">jquery animate函数不能处理背景色渐变，需要使用要jquery.color插件</span><br><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;cdn.bootcss.com&#x2F;jquery-color&#x2F;2.1.2&#x2F;jquery.color.js&quot;&gt;&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>



<p>stop()方法停止动画效果</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(this).children(&quot;ul&quot;).stop().show(500);</span><br></pre></td></tr></table></figure>



<h6 id="动态创建元素及应用"><a href="#动态创建元素及应用" class="headerlink" title="动态创建元素及应用"></a>动态创建元素及应用</h6><p>jQuery中创建元素及追加元素<br>DOM中可以动态创建元素：document.createElement（”标签的名字”）；</p>
<p>jQuery中同样可以创建元素标签并且返回的就是jQuery对象，可以直接调用方法进行使用</p>
<p>append方法用来在元素的<strong>末尾追加元素</strong>（最后一 个子节点）。增加元素末尾（儿子)<br>prepend，<strong>在元素的开始添加元素（第一个子节点）。增加元素开始儿子）</strong><br>after，在元素之后添加元素（添加兄弟）增加元素后面兄弟before：在元素之前添加元素（添加兄弟）增加元素前面兄弟）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">DOM中创建元素：</span><br><span class="line">doucument.write(&quot;标签代码&quot;);</span><br><span class="line">缺陷：页面加载后创建元素，把页面中原有的内容全部的干掉</span><br><span class="line">innerHTML </span><br><span class="line"></span><br><span class="line">document.createElement(&quot;标签的名字&quot;)</span><br><span class="line"></span><br><span class="line">JQuery中创建元素的方式</span><br><span class="line"></span><br><span class="line">$(&quot;标签的代码&quot;)</span><br><span class="line">对象.html(&quot;标签的代码&quot;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 当前元素的里面（子元素）</span><br><span class="line">append(obj)</span><br><span class="line">用来在元素的末尾追加元素(最后一个子节点)。增加</span><br><span class="line"></span><br><span class="line">appendTo()</span><br><span class="line">把pObj对象主动的加到div中</span><br><span class="line"></span><br><span class="line">append()与appendTo()的区别</span><br><span class="line"></span><br><span class="line">$(&quot;#dv&quot;).append(pObj);</span><br><span class="line">pObj.appendTo($(&quot;#dv&quot;));</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">prepend()</span><br><span class="line"></span><br><span class="line">after()</span><br><span class="line">把元素添加到当前元素的后面(兄弟元素来添加)</span><br><span class="line">before()</span><br><span class="line">把元素添加到当前元素的前面(兄弟元素来添加)</span><br></pre></td></tr></table></figure>



<p>v</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var pObj &#x3D; $(&quot;&lt;p&gt;&lt;&#x2F;p&gt;&quot;);</span><br><span class="line">pObj.text(&quot;文字&quot;);</span><br><span class="line"></span><br><span class="line">.html()</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var obj &#x3D; [&#123; name: &quot;何伟亮&quot;, age: &quot;18&quot;, sex: &quot;男&quot; &#125;, &#123; name: &quot;伟亮&quot;, age: &quot;28&quot;, sex: &quot;男&quot; &#125;, &#123; name: &quot;亮&quot;, age: &quot;34&quot;, sex: &quot;男&quot; &#125;];</span><br><span class="line">       $(function () &#123;</span><br><span class="line">           $(&quot;input&quot;).click(function () &#123;</span><br><span class="line">               for (var i &#x3D; 0; i &lt; obj.length; i++) &#123;</span><br><span class="line">                   var arr &#x3D; [];</span><br><span class="line">                   var objs &#x3D; obj[i];</span><br><span class="line">                   arr.push(&quot;&lt;tr&gt;&lt;td&gt;&quot; + objs.name + &quot;&lt;&#x2F;td&gt;&lt;td&gt;&quot; + objs.age + &quot;&lt;&#x2F;td&gt;&lt;td&gt;&quot; + objs.sex + &quot;&lt;&#x2F;td&gt;&lt;&#x2F;tr&gt;&quot;);</span><br><span class="line">               &#125;</span><br><span class="line">               $(&quot;tbody&quot;).html(arr);</span><br><span class="line">           &#125;);</span><br><span class="line">       &#125;)</span><br></pre></td></tr></table></figure>





<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">清空内容</span><br><span class="line">$(&quot;div&quot;).html(&quot;&quot;) 空 &#x2F;&#x2F;清空元素的内容</span><br><span class="line">$(&quot;div&quot;).emtry() 清空元素中的内容</span><br><span class="line">$(&quot;div&quot;).remove(); 移除元素自身 --自杀</span><br><span class="line"></span><br><span class="line">克隆</span><br><span class="line">clone()</span><br></pre></td></tr></table></figure>





<p>表单元素的属性</p>
<p>设置和获取表单的value</p>
<p>input标签：文本框，radio,select,textarea(文本域)。checkbox…..常见的表单标签</p>
<p>都可以通过val方法获取和设置value值</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">获取文本域的内容</span><br><span class="line">text()方法</span><br><span class="line">val()方法</span><br><span class="line"></span><br><span class="line">val(选中值)</span><br><span class="line">可以改变某一项选中</span><br><span class="line"></span><br><span class="line"> $(&quot;#bu&quot;).click(function () &#123;</span><br><span class="line">                $(&quot;#selectBox&quot;).val(3);</span><br><span class="line">            &#125;);</span><br><span class="line"> &lt;select name&#x3D;&quot;&quot; id&#x3D;&quot;selectBox&quot;&gt;</span><br><span class="line">            &lt;option value&#x3D;&quot;1&quot;&gt;1&lt;&#x2F;option&gt;</span><br><span class="line">            &lt;option value&#x3D;&quot;2&quot;&gt;2&lt;&#x2F;option&gt;</span><br><span class="line">            &lt;option value&#x3D;&quot;3&quot;&gt;3&lt;&#x2F;option&gt;</span><br><span class="line">            &lt;option value&#x3D;&quot;4&quot;&gt;4&lt;&#x2F;option&gt;</span><br><span class="line">            &lt;option value&#x3D;&quot;5&quot;&gt;5&lt;&#x2F;option&gt;</span><br><span class="line">        &lt;&#x2F;select&gt;</span><br></pre></td></tr></table></figure>





<p>设置和获取系统属性值或者自定义属性</p>
<p>attr()方法：可以设置属性值，两个参数：1；属性名字，2 属性值</p>
<p>attr()方法：可以获取属性值，一个参数1；属性名字</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#dv:checkbox&quot;)</span><br><span class="line">type:checkbox</span><br></pre></td></tr></table></figure>

<p>设置复选框中（attr设置checkbox的选中问题） prop()与attr用法一样</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#dv:checkbox&quot;).prop(&quot;checked&quot;,&quot;true&quot;);</span><br><span class="line">prop(&quot;checked&quot;,&quot;false&quot;);</span><br></pre></td></tr></table></figure>



<p>设置元素和获取元素的宽高</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.css(&quot;width&quot;);</span><br><span class="line">.css(&quot;height&quot;);</span><br><span class="line">var width &#x3D; parseInt($(&quot;dv&quot;)).css(&quot;width&quot;);</span><br><span class="line">$(&quot;div&quot;).width();</span><br><span class="line">$(&quot;div&quot;).height();</span><br></pre></td></tr></table></figure>

<p>位置操作</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">offset()</span><br><span class="line">设置的时候会有pos:relative</span><br><span class="line">h获取left和top的值 都是数字类型</span><br><span class="line">console.log($(&quot;#dv&quot;).offset().left);</span><br><span class="line">console.log($(&quot;#dv&quot;).offset().top);</span><br><span class="line">offset(&quot;left&quot;:100,&quot;top&quot;:100);</span><br><span class="line">设置的时候没有px</span><br></pre></td></tr></table></figure>



<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">scrollLeft()和scrollTop()</span><br><span class="line">console.log($(document).scrollLeft());</span><br><span class="line">console.log($(document).scrollTop());</span><br><span class="line">用法和之前的offset方法类似</span><br><span class="line">获取的是数字</span><br><span class="line">设置可以在括号中添加值即可</span><br><span class="line">滚动事件</span><br><span class="line">$(window).scroll(function()&#123;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>





<h6 id="绑定和解绑"><a href="#绑定和解绑" class="headerlink" title="绑定和解绑"></a>绑定和解绑</h6><p>事件绑定</p>
<p>同一个元素绑定多个事件</p>
<p>绑定事件：bind方法</p>
<p>bind()方法 不推荐</p>
<p>第一个参数是事件名字</p>
<p>第二个参数是事件处理函数-匿名函数</p>
<p>方便：简单，多事件一次绑定参数：键值对（右），空格隔开</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#btn&quot;).bind(&#123;&quot;click&quot;:function()&#123;</span><br><span class="line"></span><br><span class="line">&#125;,&quot;moverover“:function()&#123;</span><br><span class="line">	</span><br><span class="line">&#125;&#125;)；</span><br><span class="line">$(&quot;#btn&quot;).bind(&quot;click moverover&quot;,function()&#123;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>



<p>delegate —-&gt;绑定事件 不推荐</p>
<p>c参数 </p>
<p>1.要绑定的元素</p>
<p>要绑定的事件的名字</p>
<p>绑定事件的处理函数 — 匿名函数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#dv&quot;).delegate(&quot;p&quot;,click,function()&#123;</span><br><span class="line">	alert()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>







<p>on() 推荐</p>
<p>delegate()方法内部也是调用的on方法来绑定事件</p>
<p>on方法：两个参数：1事件的名字，2事件处理函数</p>
<p>on方法：三个参数：1，事件的名字，2.要绑定事件的元素–p，3事件处理函数</p>
<p>on是父级元素调用，目的：为子级元素去绑定事件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;&quot;).on(&quot;click&quot;,function()&#123;</span><br><span class="line">	$(&quot;&quot;).on(&quot;click&quot;,&quot;p&quot;,function()&#123;</span><br><span class="line">	</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<p>绑定事件：bind：绑定多个事件<br>参数：{“事件的类型”：事件处理函数，…}<br>delegate参数：父级元素.delegate（”子级元素”，”事件类型”，事件处理函数）<br>on参数：父级元素.on（”事件类型”，”子级元素”，事件处理函数）；</p>
<p>解绑事件</p>
<p>.off()方法可以解绑事件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$().on(&quot;click&quot;,function()&#123;</span><br><span class="line">	$(&quot;#btn1&quot;).off(&quot;click&quot;);</span><br><span class="line">	off参数是要解绑的事件的名字</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>unbind事件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$().bind(&quot;click&quot;,function()&#123;</span><br><span class="line">	$(&quot;#btn1&quot;).unbind(&quot;click&quot;);</span><br><span class="line">	off参数是要解绑的事件的名字</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>undelegate()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;btn2&quot;).click(function()&#123;</span><br><span class="line">	$(&quot;dv&quot;).undelegate(&quot;p&quot;,&quot;click&quot;);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>





<p>//如果说父级元素和子级元素都是通过正常的方式绑定事件，如果通过off解绑的时候，父级元素的事件解绑了，子级元素的事件没有解绑<br>//但是：如果子级元素是通过父级元素调用delegate的方式绑定的事件，父级元素使用off方式解绑事件，这个时候父级元素和子级元素的相同的事件都会被解绑</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#dv&quot;).off(&quot;click&quot;)</span><br><span class="line">下面的代码是把子级元素的点击事件解绑了，父级的点击事件还存在</span><br><span class="line"></span><br><span class="line">$(&quot;#dv&quot;).off(&quot;click&quot;,&quot;**&quot;)</span><br></pre></td></tr></table></figure>





<p>触发事件</p>
<p>触发事件：触发某个事件的时候在该事件内部调用了其他元素的某个事件方法</p>
<p>第一种方式：直接调用元素的事件方法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#btn1&quot;).click()</span><br></pre></td></tr></table></figure>

<p>第二种方式：使用trigger()方法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;&quot;).trigger(&quot;click&quot;)</span><br><span class="line">事件名称</span><br></pre></td></tr></table></figure>

<p>第三种方式：使用 triggerHandle()方法</p>
<p>trigger()和triggerHandler()区别</p>
<p>前者会触发浏览器的默认行为，并执行事件</p>
<p>后者不会触发浏览器的默认行为，但是会执行事件</p>
<p>获取焦点属于浏览器的默认行为</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">触发文本框获取焦点的事件</span><br><span class="line">$(&quot;txt&quot;).focus()</span><br><span class="line">$(&quot;txt&quot;).trigger(&quot;focus&quot;)</span><br><span class="line">$(&quot;txt&quot;).triggerHandler(&quot;focus&quot;)</span><br><span class="line">&#x2F;&#x2F;</span><br><span class="line">P</span><br><span class="line">&#x2F;&#x2F;第一种触发事件的方式和第二种触发事件的方式是相同的，都会触发浏览器默认的事件（光标在文本框中闪烁）</span><br><span class="line">&#x2F;&#x2F;第三种触发事件的方式不会触发浏览器的默认事件</span><br><span class="line">&#125;）；</span><br></pre></td></tr></table></figure>



<p>事件对象</p>
<p>event.delegateTarget 代码绑定的对象</p>
<p>event.currentTarget 绑定事件的对象</p>
<p>event.target 真正触发事件的对象</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">console.log(arguments.length);</span><br><span class="line">argumnets.length</span><br><span class="line">获取函数在调用的时候，有几个参数</span><br><span class="line">$(&quot;#dv&quot;).on(&quot;click&quot;,&quot;input&quot;,function(event)&#123;</span><br><span class="line">	console.log(arguments.length);</span><br><span class="line">	console.log(arguments[0]);</span><br><span class="line">	console.log(event);</span><br><span class="line">	&#x2F;&#x2F;event.delegateTarget --- &gt;div</span><br><span class="line">	&#x2F;&#x2F;event.currentTarget -----&gt;input</span><br><span class="line">	&#x2F;&#x2F;event.target ---&gt;input</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>



<p>按钮改变颜色</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">$(function () &#123;</span><br><span class="line">            $(document).keydown(function (e) &#123;</span><br><span class="line">                &#x2F;&#x2F; console.log(event);</span><br><span class="line">                var keyCode &#x3D; e.keyCode;</span><br><span class="line">                switch (keyCode) &#123;</span><br><span class="line">                    case 65: $(&quot;#dv&quot;).css(&quot;background&quot;, &quot;red&quot;); break;</span><br><span class="line">                    case 66: $(&quot;#dv&quot;).css(&quot;background&quot;, &quot;yellow&quot;); break;</span><br><span class="line">                    case 67: $(&quot;#dv&quot;).css(&quot;background&quot;, &quot;green&quot;); break;</span><br><span class="line">                    case 68: $(&quot;#dv&quot;).css(&quot;background&quot;, &quot;pink&quot;); break;</span><br><span class="line">                    case 69: $(&quot;#dv&quot;).css(&quot;background&quot;, &quot;black&quot;); break;</span><br><span class="line">                &#125;</span><br><span class="line">                console.log(keyCode);</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;);</span><br><span class="line">       &#x2F;*  $(function () &#123;</span><br><span class="line">                 $(document).on(&quot;keydown&quot;, function (event) &#123;</span><br><span class="line">                     $(&quot;#keyCodeSpan&quot;).text(event.keyCode);</span><br><span class="line">                     switch (parseInt(event.keyCode(10))) &#123;</span><br><span class="line">                         case 6: changeColor(&quot;red&quot;); break;</span><br><span class="line">                         case 7: changeColor(&quot;green&quot;); break;</span><br><span class="line">                         case 8: changeColor(&quot;blue&quot;); break;</span><br><span class="line">                     &#125;</span><br><span class="line">                 &#125;)</span><br><span class="line">                 function changeColor(color) &#123;</span><br><span class="line">                     $(&quot;#bgChange&quot;).css(&quot;backgroundColor&quot;, color);</span><br><span class="line">                 &#125;</span><br><span class="line">             &#125;) *&#x2F;</span><br></pre></td></tr></table></figure>

<p>取消事件冒泡+取消默认事件</p>
<p>//事件冒泡：元素中有元素，这些元素都有相同的事件，一旦最 里面的元素的事件触发 了，外面的所有的元素的相同的事件都会被触发<br>//元素A中有一个元素B，A和B都有点击事件，B点击事件触发，A点击事件自动触发</p>
<p>取消事件冒泡</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">最里面的元素设置</span><br><span class="line">return false;俩种作用 取消事件冒泡+取消默认事件</span><br></pre></td></tr></table></figure>

<p>e.stoPropagation()</p>
<p>取消默认事件</p>
<p>event.preventDefault()</p>
<p>链式编程原理</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">链式编程原理：内部返回了return this当前对象有些方法设置了值才能返回当前对象，如果没有设置值，是获取属性对应的值，而不是当前对象</span><br></pre></td></tr></table></figure>



<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">function Student(name)&#123;</span><br><span class="line">	this.name &#x3D; name;</span><br><span class="line">	this.sayHi &#x3D; function()&#123;</span><br><span class="line">		console.log(&quot;我的名字叫&quot;+this.name)</span><br><span class="line">		return this;</span><br><span class="line">		&#x2F;&#x2F; 把当前对象返回</span><br><span class="line">	&#125;</span><br><span class="line">	this.eat &#x3D; function()&#123;</span><br><span class="line">		console.log(&quot;我就是喜欢吃大蒜&quot;)</span><br><span class="line">	&#125;</span><br><span class="line">	var stu &#x3D; new Student(&quot;小黑&quot;);</span><br><span class="line">	stu.sayHi().eat();</span><br><span class="line">	</span><br><span class="line">	传递参数</span><br><span class="line">	.html()</span><br><span class="line">	function Student(name)&#123;</span><br><span class="line">	this.name &#x3D; name;</span><br><span class="line">	this.sayHi &#x3D; function(name)&#123;</span><br><span class="line">		if(name)&#123;</span><br><span class="line">			console.log(&quot;我的名字叫&quot;+name);</span><br><span class="line">			return this;</span><br><span class="line">		&#125;else&#123;</span><br><span class="line">			console.log(&quot;我的名字叫&quot;+this.name);</span><br><span class="line">		&#125;</span><br><span class="line">		&#x2F;&#x2F;console.log(&quot;我的名字叫&quot;+this.name)</span><br><span class="line">		&#x2F;&#x2F;return this;</span><br><span class="line">		&#x2F;&#x2F; 把当前对象返回</span><br><span class="line">	&#125;</span><br><span class="line">	this.eat &#x3D; function()&#123;</span><br><span class="line">		console.log(&quot;我就是喜欢吃大蒜&quot;)</span><br><span class="line">	&#125;</span><br><span class="line">	var stu &#x3D; new Student(&quot;小黑&quot;);</span><br><span class="line">	stu.sayHi(&quot;小白&quot;).eat();</span><br><span class="line">	</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">c</span><br></pre></td></tr></table></figure>





<p>each方法</p>
<p> jQuery中有隐式迭代不需要我们再次进行遍历对某些元素进行操作但是，如果涉及到对不同的元素有不同的操作，那么需要进行each遍历</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;参数：表示每次遍历都要执行的函数</span><br><span class="line">$（&quot;1i&quot;）.each（function（index，ele）&#123;</span><br><span class="line">&#x2F;&#x2F;index 表示：当前这个元素的索引号从e开始的0-10</span><br><span class="line">var op&#x3D;（index+1）&#x2F;10；</span><br><span class="line">$（ele）.css（&quot;opacity&quot;，op）；</span><br><span class="line">&#125;）；</span><br><span class="line">$（&quot;#uu&gt;li&quot;）.each（function（index，element）&#123;</span><br><span class="line">&#x2F; &#x2F;第一个参数是索引第二个参数是对象</span><br><span class="line">&#x2F;&#x2F;console.Log（arguments[0]+&quot;&#x3D;&#x3D;&#x3D;&#x3D;&quot;+arguments[1]）；</span><br><span class="line">$（element）.css（&quot;opacity&quot;，（index+1）&#x2F;10）；</span><br><span class="line">&#125;）；</span><br></pre></td></tr></table></figure>







<p>多库共存</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;i让jQuery释放对$的控制权</span><br><span class="line">$.noConflict（）；</span><br><span class="line">var $&#x3D;&quot;哦买噶&quot;；console.1og（$）；jQuery（function（）&#123;</span><br><span class="line">jQuery（&quot;#btn&quot;）.click（function（）&#123;</span><br><span class="line">alert（&quot;正常的执行&quot;）；</span><br><span class="line">&#125;）；&#125;）；</span><br></pre></td></tr></table></figure>

<p>同一个页面不仅引入了jQuery的外部文件，也引入了其他的库文件如果此时其他的库文件中也使用了S符号那么就使用：5.noConfict）解决其他语言中：这个方式叫解决命名空间的冲突也可以这样：var itcastos.noConflict（）；</p>
<p>也可以用jQuery代替 $</p>
<h6 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h6><p><a href="http://www.htmleaf.com/" target="_blank" rel="noopener">jQuery之家-自由分享jQuery、html5、css3的插件库</a></p>
<p>jQueryUI使用</p>
<p>1.引入jQueryUl的样式文件<br>2.引入jQuery<br>3.引入jQueryUl的js文件<br>4.使用jQueryUI功能</p>
<p>自已制作插件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;input[type&#x3D;button]&quot;).click()</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">    $.fn.changeBackgrounColor&#x3D; function（color）&#123;</span><br><span class="line">    $（&quot;.c1s&quot;）.css（&quot;backgroundColor&quot;，color）；</span><br><span class="line">    &#125;；</span><br><span class="line">    $（function（）&#123;</span><br><span class="line">    &#x2F;&#x2F;点击每个按钮改变每个div的背景颜色</span><br><span class="line">    	$（&quot;input[type&#x3D;button]&quot;）.click（function（）&#123;</span><br><span class="line">        $（&quot;.cls&quot;）.changeBackgrounColor（$（this）.val（））；</span><br><span class="line">        &#x2F;&#x2F;$（&quot;.cls&quot;）.css（&quot;backgroundColor&quot;，$（this）.val（））；</span><br><span class="line">        &#x2F;&#x2F;changeBackgrounCoLor（$（this）.val（））；</span><br><span class="line">    &#125;）；</span><br><span class="line">    &#125;）；</span><br><span class="line">    &#x2F;&#x2F;function changeBackgrounCoLor（color）&#123;</span><br><span class="line">    &#x2F;&#x2F;$（&quot;.cls&quot;）.css（&quot;backgroundColor&quot;，color）；</span><br><span class="line">    &#x2F;&#x2F; &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p>语法错误</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"> box.style.height &#x3D; &quot;100px&quot;</span><br><span class="line">box.style.backgroundColor &#x3D; &quot;green&quot;</span><br></pre></td></tr></table></figure>





<p>Jquery 滚轮事件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">$(function () &#123;</span><br><span class="line">    $(document).scroll(function () &#123;</span><br><span class="line">        var scroH &#x3D; $(document).scrollTop();  &#x2F;&#x2F;滚动高度</span><br><span class="line">        var viewH &#x3D; $(window).height();  &#x2F;&#x2F;可见高度 </span><br><span class="line">        var contentH &#x3D; $(document).height();  &#x2F;&#x2F;内容高度</span><br><span class="line"></span><br><span class="line">        if (scroH &gt; 100) &#123;  &#x2F;&#x2F;距离顶部大于100px时</span><br><span class="line">            alert(&#39;asdfsd&#39;)</span><br><span class="line">        &#125;</span><br><span class="line">        if (contentH - (scroH + viewH) &lt;&#x3D; 100) &#123;  &#x2F;&#x2F;距离底部高度小于100px</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">        if (contentH &#x3D; (scroH + viewH)) &#123;  &#x2F;&#x2F;滚动条滑到底部啦</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


    </div>

    
    
    
        <div class="reward-container">
  <div></div>
  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
    打赏
  </button>
  <div id="qr" style="display: none;">
      
      <div style="display: inline-block;">
        <img src="/images/wechatpay.jpg" alt="heweiliang 微信支付">
        <p>微信支付</p>
      </div>
      
      <div style="display: inline-block;">
        <img src="/images/alipay.jpg" alt="heweiliang 支付宝">
        <p>支付宝</p>
      </div>

  </div>
</div>

        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/02/15/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/%E9%BB%91%E8%8B%B9%E6%9E%9C%E6%95%99%E7%A8%8B/" rel="prev" title="计算机基础/黑苹果教程">
      <i class="fa fa-chevron-left"></i> 计算机基础/黑苹果教程
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/02/19/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/" rel="next" title="计算机基础/操作系统">
      计算机基础/操作系统 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    
  <div class="comments">
    <div id="lv-container" data-id="city" data-uid="MTAyMC81MDY1MC8yNzEzMw=="></div>
  </div>
  

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#JQuery"><span class="nav-number">1.</span> <span class="nav-text">JQuery</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#介绍"><span class="nav-number">1.0.0.1.</span> <span class="nav-text">介绍</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#选择器"><span class="nav-number">1.0.0.2.</span> <span class="nav-text">选择器</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#样式操作"><span class="nav-number">1.0.0.3.</span> <span class="nav-text">样式操作</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#链-式编程"><span class="nav-number">1.0.0.4.</span> <span class="nav-text">链 式编程</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#动画"><span class="nav-number">1.0.0.5.</span> <span class="nav-text">动画</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#动态创建元素及应用"><span class="nav-number">1.0.0.6.</span> <span class="nav-text">动态创建元素及应用</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#绑定和解绑"><span class="nav-number">1.0.0.7.</span> <span class="nav-text">绑定和解绑</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#插件"><span class="nav-number">1.0.0.8.</span> <span class="nav-text">插件</span></a></li></ol></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="heweiliang"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">heweiliang</p>
  <div class="site-description" itemprop="description">heweiliang blog</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">96</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">18</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">24</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yourname" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:yourname@gmail.com" title="E-Mail → mailto:yourname@gmail.com" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://plus.google.com/yourname" title="Google → https:&#x2F;&#x2F;plus.google.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-google"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://stackoverflow.com/yourname" title="StackOverflow → https:&#x2F;&#x2F;stackoverflow.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i></a>
      </span>
  </div>
  <div class="cc-license motion-element" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title">
      <i class="fa fa-fw fa-link"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title2</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title3</a>
        </li>
    </ul>
  </div>

      </div>
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">heweiliang</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    <span title="站点总字数">376k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">5:42</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>


  <script defer src="/lib/three/three.min.js"></script>
    <script defer src="/lib/three/three-waves.min.js"></script>
    <script defer src="/lib/three/canvas_lines.min.js"></script>


  




  
<script src="/js/local-search.js"></script>













  

  

<script>
NexT.utils.loadComments(document.querySelector('#lv-container'), () => {
  window.livereOptions = {
    refer: location.pathname.replace(CONFIG.root, '').replace('index.html', '')
  };
  (function(d, s) {
    var j, e = d.getElementsByTagName(s)[0];
    if (typeof LivereTower === 'function') { return; }
    j = d.createElement(s);
    j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
    j.async = true;
    e.parentNode.insertBefore(j, e);
  })(document, 'script');
});
</script>

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/Epsilon2.1.model.json"},"display":{"position":"left","width":300,"height":600},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
